<template>
  <div class="AlarmClock">
    <div class="AlarmClockdrag drag">我可拖动</div>
    <el-row>
      <el-col :span="5">
        <div class="grid-content ep-bg-purple-light" style="text-align: center;">
          <el-button type="primary" link icon="CaretLeft" size="small" @click="router.go(-1)">返回</el-button><br/>
          <el-button type="primary" link icon="Plus" size="small" @click="show=true" :disabled="show">新增</el-button><br/>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content ep-bg-purple">
          <div style="margin-top: 5px;margin-left: 5px;" v-if="show">
            <el-row>
              <el-col :span="12">
                <div class="grid-content ep-bg-purple">
                  <el-time-picker v-model="selecttimer" placeholder="请选择时间" size="small" style="width: 100%"/>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content ep-bg-purple-light">
                  <el-button type="primary" link icon="plus" size="small" @click="addtimer">添加</el-button>
                  <el-button type="danger" link icon="Minus" size="small" @click="show=false">关闭</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-if="AlarmClockList.length<1 && !show" style="text-align: center;height: 55px;line-height: 55px;color: #868686;">
            暂无闹钟数据
          </div>
          <div v-if="AlarmClockList.length>0 && !show" style="height: 85px;overflow-x: hidden;overflow-y: auto;">
            <div v-for="(item,index) in AlarmClockList" :key="index" style="height: 30px;line-height: 30px;padding: 0 5px;">
              <el-switch v-model="item.state" size="small" @change="change($event,item.id)"/>
              {{ item.time }}
              <el-button type="danger" link icon="Delete" size="small" @click="Delete(item.id)">删除</el-button><br/>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" name="AlarmClock" setup>
import UseAlarmClock from "../hooks/UseAlarmClock";
import router from "../route";
import {ref} from "vue";
import {dayjs} from "element-plus";

const {AlarmClockList,Add,Update,Delete} = UseAlarmClock()
let selecttimer = ref()
let show = ref(false)

/**
 * 添加
 */
const addtimer = ()=>{
  if(selecttimer.value){
    let tm = dayjs(selecttimer.value).format("HH:mm:ss")
    Add(tm)
    selecttimer.value = ''
  }
}
/**
 * 更改状态
 */
const change = (ev,id)=>{
  Update(id,"",ev)
}

</script>

<style lang="less" scoped>
.AlarmClock {
  background-color: white;
  height: 100px;
  .AlarmClockdrag {
    height: 15px;
    line-height: 15px;
    background-color: #409EFF;
    font-size: 0.5em;
    text-align: center;
  }
}
</style>
